<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 放置页签 -->
          <el-tab-pane label="角色管理">
            <!-- 新增角色按钮 -->
            <el-row style="height: 60px">
              <el-button
                icon="el-icon-plus"
                size="small"
                type="primary"
                @click="hadd"
                >新增角色</el-button
              >
            </el-row>
            <!-- 表格 -->
            <el-table :data="list">
              <el-table-column label="序号" width="120" type="index" />
              <el-table-column label="角色名称" width="240" prop="name" />
              <el-table-column label="描述" prop="description" />
              <el-table-column label="操作">
                <template #default="{ row }">
                  <el-button
                    size="small"
                    type="success"
                    @click="hAssign(row.id)"
                    >分配权限</el-button
                  >
                  <el-button size="small" type="primary" @click="hEdit(row)"
                    >编辑</el-button
                  >
                  <el-button size="small" type="danger" @click="Del(row.id)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <el-row
              type="flex"
              justify="center"
              align="middle"
              style="height: 60px"
            >
              <!-- 分页组件
              :current-page : 显示当前页
              :page-sizes   : 选择分页条码数
              :page-size    : 显示分页条数
              layout        : 布局 total总条数 sizes选择显示条数 prev 上一条 next下一条 jumper 跳转页
              :total        : 总条数
               -->
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageParams.page"
                :page-sizes="[1, 2, 4, 8, 10]"
                :page-size="pageParams.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <!-- 新增弹框 新增员工和编辑的员工的弹层-->
      <el-dialog
        :title="isEdit ? '编辑角色' : '新增角色'"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :visible.sync="showDialog"
        @close="hClose"
      >
        <el-form
          ref="roleForm"
          :model="roleForm"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="roleForm.name" />
          </el-form-item>
          <el-form-item label="角色描述" prop="description">
            <el-input v-model="roleForm.description" />
          </el-form-item>
        </el-form>
        <!-- 底部 -->
        <el-row slot="footer" type="flex" justify="center">
          <el-col :span="6">
            <el-button size="small">取消</el-button>
            <el-button size="small" type="primary" @click="hSubmit"
              >确定</el-button
            >
          </el-col>
        </el-row>
      </el-dialog>
      <!-- 分配权限 -->
      <el-dialog title="分配权限" :visible.sync="assignPermissionShowDialog">
        <assignPermission
          :roleId="roleId"
          v-if="assignPermissionShowDialog"
          @success="assignPermissionShowDialog = false"
        />
      </el-dialog>
    </div>
  </div>
</template>
<script>
// 1.导入所有的角色接口
import { getRoles, addRoles, editRoles, delRoles } from '@/api/settings(角色管理接口).js'
// 2.导入子组件
import assignPermission from '@/views/employees(员工管理)/assignPermission(分配权限).vue'
export default {
  components: { assignPermission },
  // 1 数据
  data () {
    return {
      // (1)查询参数
      pageParams: {
        // 页码值
        page: 1,
        // 每页显示的条数
        pagesize: 2
      },
      // (2)角色列表
      list: [],
      // (3)总的条数
      total: null,
      // (4)新增弹层的显示与隐藏
      showDialog: false,
      // (5)表单数据
      roleForm: {
        // 1.新增角色名称
        name: "",
        // 2.新增角色介绍
        description: ''
      },
      // (6)校验数据
      rules: {
        // 1.新增角色名称校验
        name: [
          { required: true, message: '请填写角色的名称', trigger: 'blur' }
        ],
        // 2.新增角色介绍校验
        description: [
          { required: true, message: '请填写角色介绍', trigger: 'blur' }
        ]
      },
      // (7)编辑和新增的一个判断变量 false为新增 true为编辑
      isEdit: false,
      // (8)分配角色的弹层
      assignPermissionShowDialog: false,
      // (9)父传子 ---> roleId
      roleId: ''
    }
  },
  // 2 进入页面就执行
  created () {
    // (1)执行请求所有角色数据的函数 
    this.loadGetRoles()
  },
  // 3 事件
  methods: {
    // (1) 请求所有角色数据
    async loadGetRoles () {
      let res = await getRoles(this.pageParams)
      // 总的数据
      this.list = res.data.rows
      // 总的条数
      this.total = res.data.total
    },
    // (2) 改变页面显示的页码条数
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      // 初始化当前页为1
      this.pageParams.page = 1
      // 改变查询查询参数中的pagesize值
      this.pageParams.pagesize = val
      // 重新发送请求
      this.loadGetRoles()
    },
    // (3) 改变当前页
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      // 改变查询查询参数中的page值
      this.pageParams.page = val
      // 重新发送请求
      this.loadGetRoles()
    },
    // (4) 新增角色
    hadd () {
      // 打开弹层
      this.showDialog = true
      // 修改编辑状态
      this.isEdit = false
    },
    // (5) 确定按钮
    hSubmit () {
      // 1.兜底校验
      this.$refs.roleForm.validate(valid => {
        if (!valid) return
        // 1.发送请求
        this.isEdit ? this.doEdit() : this.loadAddRoles()
      })
    },
    // (6) 发送请求
    async loadAddRoles () {
      let res = await addRoles(this.roleForm)
      // 2.解决第三次添加角色时分页不跳转
      this.total++
      // 1.自动跳转到最后一条分页上
      this.pageParams.page = Math.ceil(this.total / this.pageParams.pagesize)
      // 3.重新渲染
      this.loadGetRoles()
      // 4.关闭弹层
      this.showDialog = false
    },
    // (6) 取消按钮
    // (7) 角色编辑
    hEdit (row) {
      // 1.填充角色编辑数据
      this.roleForm = { ...row }
      // 2.打开弹层
      this.showDialog = true
      // 3.编辑的状态
      this.isEdit = true
    },
    // (8)编辑
    doEdit () {
      this.$refs.roleForm.validate(valid => {
        if (!valid) return
        // 发送请求 
        this.loadEditRoles()
      })
    },
    // (9)编辑请求
    async loadEditRoles () {
      let res = await editRoles(this.roleForm)
      // 1.重新渲染
      this.loadGetRoles()
      // 2.关闭弹层
      this.showDialog = false
    },
    // (10)删除
    Del (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await delRoles(id)
        if (res.code === 10000) {
          // 成功提示
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 删除优化
          // 如果当前页面有1条数据那么就是就需要在下次发送请求的时候让pageParams.page-1
          if (this.list.length == 1) {
            this.pageParams.page--
            // 如果当前页码时小于0获取等于0那么就需要将当前页赋值为1
            if (this.pageParams.page <= 0) {
              this.pageParams.page = 1
            }
          }
          // 删除成功重新渲染
          this.loadGetRoles()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // (11)关闭弹层
    hClose () {
      // 1.表单初始化,回到表单的原始状态
      this.$refs.roleForm.resetFields()
      // 2.手动清空数据
      this.roleForm.name = ""
      this.roleForm.description = ''
    },
    // (12)分配权限
    hAssign (id) {
      // 保存id
      this.roleId = id
      // 打开弹层
      this.assignPermissionShowDialog = true
    }
  }
}
</script>
<style>
</style>